<template>
  <div class="articleList">
    <van-nav-bar title="列表" fixed left-arrow @click-left="$router.go(-1)" />

    <van-tabs v-model="active">
      <van-tab
        :title="item.catename"
        v-for="item in list"
        :key="item.id"
      >
        <mj-classify :id="item.id"></mj-classify>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import MjClassify from '@/components/MjClassify.vue'
import { homeApi } from '@/api/article'
export default {
  name: 'classifyList',
  data () {
    return {
      list: [],
      active: +this.$route.query.index
    }
  },
  components: {
    MjClassify
  },
  created () {
    this.classifyList()
  },
  methods: {
    async classifyList () {
      const { data } = await homeApi()
      this.list = data.data.allCate
    }
  }
}
</script>

<style lang="less" scoped>
.articleList {
  // padding-top: 46px;
  height: 100vh;
  width: 100vw;
  padding-top: 46px;
  padding-bottom: 50px;
  overflow: hidden;
  .van-nav-bar {
    background-color: #fff;
    ::v-deep {
      .van-nav-bar__title {
        color: #000;
      }
      .van-icon-arrow-left {
        color: #1989fa !important;
      }
    }
  }
  ::v-deep {
    .van-tabs--line .van-tabs__wrap {
      position: fixed !important;
      z-index: 999;
    }
    .van-cell-group {
      padding-top: 40px;
    }
  }
  .van-tabs {
    height: 100%;
    padding-top: 50px;
    ::v-deep {
      .van-tabs__wrap {
        position: fixed;
        left: 0;
        right: 30px;
        top: 46px;
      }
      .van-tabs__content,
      .van-tab__pane {
        height: 100%;
      }
      .van-tabs__line {
        background-color: #3196fa;
      }
    }
  }
}
</style>
